
  $(function(){
    $(".down-left").children("li").hover(function(){
        $(this).toggleClass("black").siblings().removeClass("black");
        $(this).children("a").toggleClass("white").siblings().removeClass("white");
     })

  // let pid =localStorage.getItem("pid");
    //  详情页渲染开始
   
    let id = new URLSearchParams(location.search).get(`id`);
      // console.log(id);
    let url = `http://jx.xuzhixiang.top/ap/api/detail.php?id=${id}`;
    
    $.get(url,{
      
    }).then((resdatr)=>{
      console.log(resdatr);
      let str =""
     
        str+=`
        <div id="mirror-left">
        <div id="bigimg">
          <img src="${resdatr.data.pimg}" alt="" />
          <div id="zoom"></div>
        </div>
        <div id="fangd"><img src="${resdatr.data.pimg}" alt="" /></div>
        <div id="smallimg">
          <img src="image/001.png" alt="" />
          <img src="image/002.png" alt="" />
          <img src="image/003.png" alt="" />
          <img src="image/004.png" alt="" />
        </div>
      </div>
      <div class="mirror-middle">
        <div class="sku-name">
        ${resdatr.data.pname}
        </div>
        <div class="newsred">
          <div class="news_ad">
            【松下厨房小家电中秋家宴，9月4日晚8开抢】到手价不高于899，价保30天，“松下真香煲”IH变频加热，精控火候【打开厨房新世界，戳我~~】
            <a href="">查看></a>
          </div>
        </div>
        <div class="bgcimg"></div>

        <div class="money-r">
          <div class="money_big">
            <div class="summary-price">
              <div class="price-dt">京 东 价</div>
              <div class="price-dd">
                <span style="font-size: 16px">￥</span>
                <span class="price-ddt">${resdatr.data.pprice}</span>
              </div>
            </div>
            <div class="summary-youh">
              <div class="youhuiq">优 惠 券:</div>
              <div class="youhuiq-b">每满200 减30</div>
            </div>

            <div class="cuxiao"></div>
          </div>
        </div>
       
        <div class="goshop">
          <div class="shop-number">
            <input type="text" value="1" class="input-nb" />
            <div  class="shoptop">+</div>
            <div  class="shopbuttom">-</div>
          </div>
          <div class="addshop">加入购物车</div>
          <a href="" class="oldres">参加以旧换新</a>
        </div>
      </div>
      <div class="mirror-right"></div>
        `
      $(".mirror").html(str)
//点击加入购物车，添加商品开始
      console.log(resdatr.data.pid);
 $(".addshop").on("click", function() {
  $.get("http://jx.xuzhixiang.top/ap/api/add-product.php",{
    uid: 139443,
    pid:resdatr.data.pid,
    pnum:1
  }).then((resdatg)=>{
    console.log(resdatg);
  })




 })
//点击加入购物车，添加商品结束


$(".shoptop").on("click", function () {
    let zeng = $(".input-nb").attr("value");
    zeng++
    console.log(zeng);
  })
  $(".input-nb").attr("value");
















  function cctv(id) {
    return document.getElementById(id);
  }
  class Zoom {
    constructor() {
      this.zoomBox = cctv("mirror-left");
      this.midArea = cctv("bigimg"); //选择放大区
      this.midImg = this.midArea.children[0]; //选择放大的图
      this.zoom = cctv("zoom");
      this.bigArea = cctv("fangd"); //大图区域
      this.bigimg = this.bigArea.children[0];
      this.smallArea = cctv("smallimg"); //小图区域
      this.smallimgs = this.smallArea.children;
      this.move();
    }
    move() {
      //   this.constructor();
      this.midArea.onmouseover = () => {
        this.zoom.style.display = "block";
        this.bigArea.style.display = "block";
      };
      this.midArea.onmouseout = () => {
        this.zoom.style.display = "none";
        this.bigArea.style.display = "none";
      };
      this.midArea.onmousemove = (e) => {
        //放大镜跟着鼠标走，并且放大镜中的鼠标在正中间
        let evt = e || event;
        /*   let x = evt.offsetX; //相对于事件源的左边距
        let y = evt.offsetY; //相对于事件源的上边距
  
        let l = x - this.zoom.offsetWidth / 2;
        let t = y - this.zoom.offsetHeight / 2;  */
        let l =
          evt.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth / 2;
        let t =
          evt.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight / 2;
  
        // console.log(l);
        // console.log(t);
        if (l <= 0) {
          l = 0;
        }
        if (l >= this.midArea.offsetWidth - this.zoom.offsetWidth) {
          l = this.midArea.offsetWidth - this.zoom.offsetWidth;
        }
  
        if (t <= 0) {
          t = 0;
        }
        if (t >= this.midArea.offsetHeight - this.zoom.offsetHeight) {
          t = this.midArea.offsetHeight - this.zoom.offsetHeight;
        }
        this.zoom.style.left = l + "px";
        this.zoom.style.top = t + "px";
  
        //大图跑
        this.bigimg.style.left = -2 * l + "px";
        this.bigimg.style.top = -2 * t + "px";
        // console.log( this.bigimg.style.top );
        //缩略图
        for (let i = 0; i < this.smallimgs.length; i++) {
          this.smallimgs[i].onmouseover = () => {
            this.midImg.src = this.bigimg.src = this.smallimgs[i].src;
          
          };
        }
      };
    }
  }
  new Zoom();
  
    })
    //  详情页渲染结束
    $(".myshop").on("click", function (e) {
      location.reload();

      location.href="list.html"
     

    
    })

    let uid= localStorage.getItem("uid")
    $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php",{
      id:uid
    }).then((bians)=>{
      $(".redr").text(bians.data.length)
   

    })
    // 点击加减会增减开始
 
    // 点击加减会增减结束
})


